import React, { PureComponent, } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {
  Row, Col, Card, Form, Input, Tabs, Spin, Icon, Button, Modal, message, Table, Tag, DatePicker, InputNumber, Popconfirm
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './MemberDetail.less';
import moment from 'moment';

const { TabPane } = Tabs;
const FormItem = Form.Item;

@connect(({ member, loading }) => ({
  member,
  loading: loading.models.member,
}))

export default class MemberDetail extends PureComponent {
  state = {};

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'member/fetchMemberDetail',
      payload: { userId: this.props.match.params.userId },
    });

    dispatch({
      type: 'member/fetchPayRecord',
      payload: { userId: this.props.match.params.userId },
    });

    dispatch({
      type: 'member/fetchPoint',
      payload: { userId: this.props.match.params.userId },
    });
  }

  render() {
    const { memberDetail, payRecord, point } = this.props.member;

    const payRecordColumns = [
      {
        title: '订单号',
        dataIndex: 'ordersId',
        key: 'ordersId',
      },
      {
        title: '购买日期',
        dataIndex: 'createTime',
        key: 'createTime',
      },
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        key: 'goodsName ',
      },
      {
        title: '商品分类',
        dataIndex: 'ordersType',
        key: 'ordersType',
        render(val) {
          return <span>{val == '0' ? '课程(小萌早教)' : val == '1' ? '绘本' : val == '2' ? '积分' : '其他'}</span>;
        },
      },
      {
        title: '价格',
        dataIndex: 'totalMoney',
        key: 'totalMoney',
      },
      {
        title: '交易状态',
        dataIndex: 'ordersSts',
        key: 'ordersSts ',
        render(val) {
          return <span>{val == '0' ? '待支付' : val == '1' ? '已支付' : val == '2' ? '交易成功' : val == '3' ? '用户已取消' : val == '4' ? '退款中' : val == '5' ? '已退款' : val == '6' ? '交易关闭' : '其他'}</span>;
        },
      },
    ]

    const pointListColumns = [
      {
        title: '日期',
        dataIndex: 'createTime',
        key: 'createTime',
      },
      {
        title: '收支描述',
        dataIndex: 'remark',
        key: 'remark',
      },
      {
        title: '积分值',
        dataIndex: 'score',
        key: 'score ',
      },
    ]

    return (
      <Form>
        <PageHeaderLayout title="会员详情">
          <Button icon="left" type="primary" onClick={() => { this.props.dispatch(routerRedux.goBack()) }} >返回</Button>
          <Tabs>
            <TabPane tab="基本信息" key="1">
              {this.props.loading ?
                <Spin /> :
                <Card>
                  <div className={styles.table}>
                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>会员ID</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.userId : null}</div>
                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>绑定SN码</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.snCodeList ? memberDetail.snCodeList.map(val => <span>{val.snCode}</span>) : null : null}</div>
                      </div>
                    </div>
                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>会员等级</div>
                        <div className={styles.valueStyle}>{memberDetail ? (memberDetail.userRank==0? ("普通会员"):(memberDetail.userRank==1?('借阅会员'):'vip会员')) : null}{memberDetail && memberDetail.rankStartTime && memberDetail.rankEndTime?('('+memberDetail.rankStartTime +"--"+memberDetail.rankEndTime+')'):null}</div>
                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>门店名称</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.franName ? memberDetail.snCodeList.map(val => <span>{val.snCode}</span>) : null : null}</div>
                      </div>
                    </div>

                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>手机号</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.userPhone : null}</div>
                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>绑定M码</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.mCode : null}</div>
                      </div>
                    </div>

                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>注册时间</div>
                        <div className={styles.valueStyle}>{memberDetail ? moment(memberDetail.createTime).format('YYYY-MM-DD') : null}</div>
                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>加盟商</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.franName : null}</div>
                      </div>
                    </div>

                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>注册来源</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.loginType == "0" ? '家长端' : memberDetail.loginType == "1" ? '小萌早教' : memberDetail.loginType == "2" ? '小萌绘本' : memberDetail.loginType == "3" ? '萌萌乐视频' : '其他' : null}</div>
                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>登录家长端</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.isLoginSapp == "0" ? '否' : '是' : null}</div>
                      </div>
                    </div>

                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>宝宝昵称</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.userName : null}</div>
                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>公众号openid</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.commonOpenid : null}</div>
                      </div>
                    </div>

                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>宝宝年龄</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.ageGroup == '0' ? '2-4岁' : memberDetail.ageGroup == '1' ? '4-6岁' : memberDetail.ageGroup == '2' ? '6-8岁' : '其他年龄段' : null}</div>
                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>小程序openid</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.smallOpenid : null}</div>
                      </div>
                    </div>

                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>宝宝性别</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.userSex == '0' ? '男孩' : memberDetail.userSex == '1' ? '女孩' : '未填' : null}</div>
                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>微信unionid</div>
                        <div className={styles.valueStyle}>{memberDetail ? memberDetail.unionId : null}</div>
                      </div>
                    </div>
                  </div>


                </Card>
              }


            </TabPane>
            <TabPane tab="购买记录" key="2">
              {(payRecord && payRecord.ordersList) ?
                <Card>
                  <Table
                    bordered
                    loading={this.props.loading}
                    dataSource={payRecord.ordersList}
                    columns={payRecordColumns}
                    pagination={false}
                  />
                </Card>

                :
                '暂无记录'
              }
            </TabPane>
            <TabPane tab="积分信息" key="3">
              {(point && point.scoreChangeList) ?
                <Card>
                  <Table
                    bordered
                    loading={this.props.loading}
                    dataSource={point.scoreChangeList}
                    columns={pointListColumns}
                    pagination={false}
                  />
                </Card>
                :
                '暂无记录'
              }
            </TabPane>
            <TabPane tab="观看历史" key="4">
              观看历史
          </TabPane>
            <TabPane tab="优惠券" key="5">
              优惠券
          </TabPane>
          </Tabs>
        </PageHeaderLayout>
      </Form>
    );
  }
}
